<template>
  <div class="tabbar">
    <router-link v-for="(item,index) in contents" :key="index" :to="item.path"
    active-class="current-router">
      <div class="item-icon">
        <i class="iconfont" :class="item.icon"></i>
      </div>
      <div class="item-name">
        {{item.name}}
      </div>
    </router-link>
  </div>
</template>

<script>
export default {
  //父子组件传值，接收父组件的值
  props:{
    contents:Array
  }
}

</script>
<style lang="scss" scoped>
$tabbar-radius:20px;

.tabbar{
    height:90px;
    background:$module-color;
    border-radius: $tabbar-radius;
    box-sizing: border-box;
    width:90%;
    margin-left: 5%;
    position:absolute;
    bottom:300px;
    display: flex;
    justify-content: space-around;
    text-align:center;
    align-items: center;
    box-shadow:0px -5px 2px rgba($color:#ccc,$alpha:0.1);
    .item-icon{
        height:50px;
        i{
            font-size: 35px;
            color:$milk-tea-color;
        }
    }
    a{
        color:#999;
    }
    .current-router{
        color:$font-color;
    }
}
</style>